<template>
   <div>
       <a-space>
           <Add @show="show"/>
            <Search @show="show" />
       </a-space>
       
       <Update @show="show" :student="student" :visible.sync="visible"/>
       <StudentList :students="students" :pagination="pagination" @show="show" @setStudent="setStudent" @setVisible="setVisible" />
   </div>
</template>

<script>
import {getAll} from '../services/student'
import StudentList from '../components/student/StudentList.vue'
import Add from '../components/student/Add.vue'
import Update from '../components/student/Update.vue'
import Search from '../components/student/Search.vue'
export default {
    data(){
        return {
            students:[],
            student:{},
            visible:false,
            type:'name',
            value:'',
            pagination:{
                pageSizeOptions:[5,10,15,20],
                showSizeChanger:true
            }
        }
    },
    created(){
        this.show();
    },
    methods:{
        setStudent(student){
            this.student = student;
        },
        setVisible(visible){
            this.visible = visible;
        },
        async show(current,pageSize,type,value){
            if(type){
                this.type = type;
                this.value = value;
            }
            // console.log("show",current,pageSize,type,value)
            // console.log(await getAll());
            let data = await getAll(current,pageSize,this.type,this.value);
            this.students = data.rows;
            this.pagination = {...this.pagination,...data,pageSize:data.size};
            // console.log(this.pagination);
        }
    },
    watch:{
        visible(oldVal,newVal){
            console.log(oldVal,newVal);
        }
    },
    components:{
        StudentList,Add,Update,Search
    }
};
</script>

<style>
</style>